<template>
  <!-- 增改用户弹框 -->
  <hcDialog
    dialogWidth="680px"
    :dialogTitle="
      options.type === 'add'
        ? $t('user.userManagement.newUser')
        : $t('user.userManagement.editUser')
    "
    customClass="hymson-dialog user-dialog"
    :isVisable="options.show"
    :isFooter="true"
    @closeDialog="closeFun"
    @save="saveDialog(formRef)"
  >
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-width="6vw"
      class="add-user-ruleForm"
      status-icon
    >
      <el-row>
        <el-col :span="12">
          <el-form-item :label="$t('user.userManagement.idCard')">
            <el-input
              v-model="form.cardId"
              :placeholder="$t('user.userManagement.cardInfo')"
              type="textarea"
              resize="none"
              :rows="1"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            :label="$t('user.userManagement.accountNumber')"
            prop="userName"
          >
            <el-input
              v-model="form.userName"
              :placeholder="$t('user.userManagement.accountInfo')"
              type="textarea"
              resize="none"
              :rows="1"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item :label="$t('user.userManagement.name')" prop="name">
            <el-input
              v-model="form.name"
              :placeholder="$t('user.userManagement.nameInfo')"
              type="textarea"
              resize="none"
              :rows="1"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            :label="$t('user.userManagement.userPassword')"
            :prop="props.options.type === 'add' ? 'password' : ''"
          >
            <el-input
              v-model="form.password"
              :placeholder="$t('user.userManagement.passwordInfo')"
              type="password"
              maxlength="20"
              show-password
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item :label="$t('user.userManagement.role')" prop="roleIds">
        <el-select
          v-model="form.roleIds"
          multiple
          :placeholder="$t('user.userManagement.selectInfo')"
        >
          <el-option
            v-for="item in list"
            :key="item.id"
            :label="item.roleName"
            :value="item.id"
            :disabled="!item.state"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item :label="$t('user.userManagement.nickname')" prop="nick">
            <el-input
              v-model="form.nick"
              :placeholder="$t('user.userManagement.nickInfo')"
              maxlength="30"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('user.userManagement.gender')">
            <el-select
              v-model="form.sex"
              :placeholder="$t('user.userManagement.selectInfo')"
            >
              <el-option
                :label="$t('user.userManagement.male')"
                :value="0"
              ></el-option>
              <el-option
                :label="$t('user.userManagement.female')"
                :value="1"
              ></el-option>
              <el-option
                :label="$t('user.userManagement.unknown')"
                :value="2"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item :label="$t('user.userManagement.status')">
            <el-radio-group v-model="form.state">
              <el-radio :label="true">{{ $t("common.normal") }}</el-radio>
              <el-radio :label="false">{{ $t("common.disable") }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('user.userManagement.age')" prop="age">
            <el-input-number
              v-model="form.age"
              controls-position="right"
              :min="0"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item
            :label="$t('user.userManagement.phoneNumber')"
            prop="phone"
          >
            <el-input
              v-model="form.phone"
              :placeholder="$t('user.userManagement.phoneInfo')"
              maxlength="11"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('user.userManagement.email')" prop="email">
            <el-input
              v-model="form.email"
              :placeholder="$t('user.userManagement.emailInfo')"
              maxlength="50"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item :label="$t('user.userManagement.introduction')">
            <el-input
              v-model="form.introduction"
              type="textarea"
              :placeholder="$t('user.userManagement.introInfo')"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('user.userManagement.remark')">
            <el-input
              v-model="form.remark"
              type="textarea"
              :placeholder="$t('common.remarkInfo')"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </hcDialog>
</template>

<script setup name="UserDialog">
import { reactive, ref, toRefs, watch } from "vue";
import useTable from "@/hooks/useTable";
import { useI18n } from "vue-i18n";

const { t: $t } = useI18n();
const { list } = useTable("/Role", false); // false 不要分页
const emit = defineEmits(["onSure", "onCancel"]);

const props = defineProps({
  options: {
    type: Object,
    default: () => {
      return {
        show: false,
        type: "add", // 用于判断是编辑还是删除 add edit
        curUser: null, // 当前编辑的用户
      };
    },
  },
});

const formRef = ref();

const data = reactive({
  form: {
    name: "", // 用户名
    nick: "", // 昵称
    sex: 2, // 用户性别
    age: 1, // 年龄
    phone: "", // 手机号码
    email: "", // 邮箱
    userName: "", // 账户名
    password: "", // 用户密码
    cardId: "", // 用户卡号
    orderNum: 0, // 排序
    state: true, // 状态
    roleIds: [], // 菜单权限
    introduction: "", // 简介
    remark: "", // 备注
  },
  rules: {
    userName: [
      {
        required: true,
        message: $t("dialog.userManagement.accountInfo"),
        trigger: "blur",
      },
    ],
    password: [
      {
        required: true,
        message: $t("dialog.userManagement.passwordInfo"),
        trigger: "blur",
      },
    ],
    name: [
      {
        required: true,
        message: $t("dialog.userManagement.nameInfo"),
        trigger: "blur",
      },
    ],
    roleIds: [
      {
        required: true,
        message: $t("dialog.userManagement.selectInfo"),
        trigger: "blur",
      },
    ],
  },
});
// 添加、修改用户
const saveDialog = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid) => {
    if (valid) {
      emit("onSure", {
        form: JSON.parse(JSON.stringify(data.form)),
        type: props.options.type,
        id: props.options.curUser?.id, // 用于编辑的id
      });
      closeFun();
    }
  });
};

// 关闭弹框
const closeFun = () => {
  data.form = {
    name: "", // 用户名
    nick: "", // 昵称
    sex: 0, // 用户性别
    age: 1, // 年龄
    phone: "", // 手机号码
    email: "", // 邮箱
    userName: "", // 账户名
    password: "", // 用户密码
    cardId: "", // 用户卡号
    orderNum: 0, // 排序
    state: true, // 状态
    roleIds: [], // 菜单权限
    introduction: "", // 简介
    remark: "", // 备注
  };
  formRef.value.resetFields();
  emit("onCancel");
};

watch(
  () => props.options,
  (val) => {
    if (val.type === "edit") {
      const curUser = JSON.parse(JSON.stringify(val.curUser));
      for (let key in data.form) {
        data.form[key] = curUser[key];
        data.form.roleIds = curUser.roles.map((role) => role.id);
      }
    }
  },
  { deep: true }
);

const { form, rules } = toRefs(data);
</script>

<style lang="scss">
.user-dialog.el-dialog {
  .add-user-ruleForm {
    padding: 0 20px 0 0;
    .el-form-item__label {
      flex: none;
      font-size: 16px;
      font-weight: 600;
      display: flex;
      align-items: center;
    }
    .el-form-item__content {
      .el-select,
      .el-input,
      .el-input-number {
        flex: none;
        width: 100%;
      }
    }
  }
}
</style>
